<template>
	<view class="memberPayInfo">
		<view class="top">
			<view class="card">
				<view class="item cardName">
					白金卡
				</view>
				<view class="item" style="color:#FFD077;">
					999999
				</view>
			</view>
			<view class="info">
				<view class="item">
					实际余额:
					<span style="color: red;"> ￥999</span>
				</view>
				<view class="item">
					赠送余额:
					<span style="color: red;"> ￥99</span>
				</view>
			</view>
		</view>
		<view class="from">
			<view class="item">
				实际支付：
				<u-input></u-input>
			</view>
			<view class="item">
				赠送支付：
				<u-input></u-input>
			</view>
		</view>
		<view class="btn">
			<view class="shop_bt">
				<view class="shop_bt_left">
					<text>剩余应付:</text>￥999
				</view>
				<view class="shop_bt_right" @click="openSubmit">
					立即支付
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				
			}
		},
		onLoad(val){
			console.log(+val.money);
		},
		created(){
			
		},
		methods: {
			openSubmit(){
				
			}
		},
	}
</script>

<style lang="less" scoped>
	.body{
		display: flex;
		flex-direction: column;
		align-items: center;
		.top{
			width: 90%;
			margin: 20upx 0;
			background-color: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;
			border-radius: 15upx;
			.card{
				margin: 20upx 0;
				width:300upx;
				height:200upx;
				background-image: url('../../static/images/card_vip3.png');
				background-repeat: no-repeat;  
				background-size: cover;  
				border-radius: 20upx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.item{
					color: #fff;
					margin: 15upx 50upx;
					font-size: 32upx;
					font-weight: 500;
					span{
						margin-left: 20upx;
					}
				}
				.cardName{
					font-size: 36upx;
					font-weight: 600;
				}
			}
			.info{
				flex: 0.8;
				.item{
					font-size: 28upx;
					margin: 10upx 0;
				}
			}
		}
		.from{
			width: 90%;
			margin: 20upx 0;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			border-radius: 15upx;
			.item{
				margin: 20upx 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.btn {
			margin: 10upx 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 0;
			left: 0;
		
			.shop_bt {
				width: 90%;
				height: 90upx;
				line-height: 90upx;
				border-radius: 100upx;
				background-color: #333;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
		
				.shop_bt_left {
					display: flex;
					align-items: center;
					width: 70%;
					height: 100%;
					font-size: 35upx;
					text-indent: 30upx;
		
					text {
						font-size: 28upx;
						color: rgb(209, 124, 47);
					}
				}
		
				.shop_bt_right {
					width: 30%;
					height: 100%;
					background-color: #07c160;
					border-radius: 0 100upx 100upx 0;
					text-align: center;
				}
			}
		}
	}
</style>